<template>
  <div class="father">
      <div class="return">
        <el-button type="infor" title="上一级页面" @click="returnFormModel"><i class="el-icon-back">返回</i></el-button>
      </div>
      <div class="content">
          <p v-html="dataSvg">{{dataSvg}}</p>
      </div>
      <div>
        <el-table
          :data="taskCommentList"
          size="small"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column
                        label="任务编号"
                        width="300">
                    <template slot-scope="scope">
                        <span>{{ scope.row.taskId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审批人员"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审批节点"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.taskName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="开始时间"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审批进度"
                        width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.endTime!=null">结束</span>
                        <span v-else>审批中</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审批类型"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审批时间"
                        width="200">
                    <template slot-scope="scope">
                        <span v-if="scope.row.time!=null">{{ scope.row.time | dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="批注">
                    <template slot-scope="scope">
                        <span>{{ scope.row.message }}</span>
                    </template>
                </el-table-column>
          </el-table>
      </div>
  </div>
</template>

<script>
export default {
    name:"TaskComment",
    data(){
        return{
            dataSvg:'',
            taskCommentList:[],
            loading:false
        }
    },
    mounted(){
        this.initViewProcess();
        this.initTaskCommentList();
    },
    methods:{
        initViewProcess(){
             this.getRequest("/activity/ActRuExecution/query/HighLightedProcessDiagramByProcessInstanceId/"+this.$route.query.processInstanceId).then(resp => {
                if (resp) {
                    this.dataSvg = resp;
                }
            });
        },
        initTaskCommentList(){
          this.loading = true;
          this.getRequest("/activity/ActRuTask/query/TaskCommentByProcessInstanceId/"+this.$route.query.processInstanceId).then(resp => {
              this.loading = false;
              if (resp) {
                  this.taskCommentList = resp.data;
              }
          });
        },
        returnFormModel(){
            if(this.$route.query.viewPage=='ProcessHandlingPage'){
              this.$router.push({
                path: '/ProcessHandlingPage',
                query: {
                    processInstanceId:this.$route.query.processInstanceId
                }
              })
            }else{
              this.$router.push(this.$route.query.viewPage);
            }
        }
    }
}
</script>

<style scoped>
  .content{
    position: relative;
  }
  .return{
    position: absolute;
    bottom: 100;
    right: 10px;
  }
</style>>
